import styles from "./App.module.css";
import logo from "./assets/images/logo.svg";

import Robot from "./components/Robot";
import ShopCart from "./components/ShopCart";
//css 作为模块被加载
import React, { Component } from "react";

interface Props {}
interface State {
  robotGallert: any[];
}

export default class App extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      robotGallert: [],
    };
  }
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => this.setState({ robotGallert: data }));
  }
  render() {
    return (
      <div className={styles.app}>
        <div className={styles.appHeader}>
          <img src={logo} alt="logo" className={styles.appLogo} />
          <h1>罗伯特机器人炫酷吊炸天online购物平台</h1>
        </div>
        <ShopCart />
        <div className={styles.robotList}>
          {this.state.robotGallert.map((item) => (
            <Robot id={item.id} email={item.email} name={item.name} />
          ))}
        </div>
      </div>
    );
  }
}
